<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>Hello MUI</title>
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
     
		<!--标准mui.css-->
		<link rel="stylesheet" href="../../css/mui.min.css">
		<link rel="stylesheet" type="text/css" href="../../css/style.css">
		<style>
			.mui-table-view-cell:after{
				display: none;
			}
		</style>
	</head>

	<body>
		<div id="list">
			<div class="notice-main mmt20">
				<ul>
					<li id="noticedetail" v-for="item in items">
						<span class="mui-icon fl"><img src="../../images/services02.png"></span>
						<div class="notice-wrap posir fl" @tap="open_detail(item)">
							<div class="noticedetailContent">
								<div class="title z">{{item.title}}</div>
								
								<div class="clear"></div>
							</div>
							<div class="clear"></div>
							<div class="noticedetailTime">
							<div class="name fl">{{item.member_name}}</div>
							<div class="time fr">{{item.time}}</div>
							</div>
							<div class="clear"></div>
						</div>
						<div class="clear"></div>
					</li>
				</ul>
			</div>
		</div>
	</body>
	<script src="../../js/mui.js"></script>
	<script src="../../js/vue.min.js"></script>
	<script src="../../js/app.js"></script>
	<script src="../../js/token.js"></script>
	<script>
		var firstid = ''; //最旧的msg id，用于上拉加载
		var lastid = ''; //最新的msg id，用于下拉刷新
		var state = app.getState();
		var memberToken = state.memberToken
		var noticetype = "3";
		mui.init({
			pullRefresh: {
				container: '#list',
				down: {
					style: 'circle',
					offset: '0px',
					auto: true,
					callback: pulldownRefresh
				},
				up: {
					contentrefresh: '正在加载...',
					callback: pullupRefresh
				}
			}
		});
		mui.plusReady(function() {

		});
		//下拉刷新
		function pulldownRefresh() {
			if(window.plus && plus.networkinfo.getCurrentType() === plus.networkinfo.CONNECTION_NONE) {
				plus.nativeUI.toast('似乎已断开与互联网的连接', {
					verticalAlign: 'top'
				});
				return;
			}
			var data = {
				uid: state.userid,
				type: noticetype,
				memberToken: memberToken
			};
			if(lastid) { //说明已有数据，目前处于下拉刷新，增加时间戳，触发服务端立即刷新，返回最新数据
				data.lastid = lastid;
			}
			mui.post(Apiurl+'index/notice', data, function(data) {
				mui('#list').pullRefresh().endPulldownToRefresh();
				if(data && data.length > 0) {
					lastid = data[0].id;
					if(!firstid) { //首次拉取列表时保存最后一条消息的id，方便上拉加载时使用
						firstid = data[data.length - 1].id;
					}
					list.items = data.concat(list.items);
				}
			}, 'json');
		}
		//上拉加载
		function pullupRefresh() {
			if(window.plus && plus.networkinfo.getCurrentType() === plus.networkinfo.CONNECTION_NONE) {
				plus.nativeUI.toast('似乎已断开与互联网的连接', {
					verticalAlign: 'top'
				});
				return;
			}
			var data = {
				uid: state.userid,
				type: noticetype,
				memberToken : memberToken
			};
			if(firstid) { //说明已有数据，目前处于上拉加载，传递当前Id 返回历史数据
				data.firstid = firstid;
			}
			//请求历史列表信息流
			mui.post(Apiurl+'index/notice', data, function(data) {
				mui('#list').pullRefresh().endPullupToRefresh();
				if(data && data.length > 0) {
					firstid = data[data.length - 1].id; //保存最后一条消息的id，上拉加载时使用
					list.items = list.items.concat(data);
				}
			}, 'json');
		}
		var list = new Vue({
			el: '#list',
			data: {
				items: [] //列表信息流数据
			},
			methods: {
				open_detail: function(item) {
					mui.openWindow({
						url: 'notice_detail.html',
						id: 'noticedetail',
						styles: {
							"render": "always",
							"popGesture": "hide",
							"bounce": "vertical",
							"bounceBackground": "#efeff4",
							"titleNView": titleNView = { //详情页原生导航配置
								autoBackButton: true, //自动绘制返回箭头
								backgroundColor: '#25aae3', //导航栏背景色
								titleText: "详细信息", //导航栏标题
								titleColor: '#F7F7F7', //文字颜色
								//coverage:"120px",
								//type: 'transparent', //透明渐变样式
								splitLine: { //底部分割线
									color: '#cccccc'
								}
							}
						},
						extras: {
							noticeid: item.id,
							userid: state.userid
						}
					});
				}
			}
		});
	</script>

</html>